<!DOCTYPE html>
<html lang="en">
<head>
<title>地图定位</title>
<meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8" charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style type="text/css">
.page-top-tip{width: 300px;position: absolute;left:70px;top: 5px;background: #fff none repeat scroll 0 0;
border: 1px solid #ccc;margin: 10px auto;padding: 6px;font-size: 14px;}
</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=19a49e17b6eb9e0d69fa19de68cd27ed&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="/staticFile/js/common/commonUtil.js"></script>
</head>
<body>
<div id="aMapContainer" style="width: 100%;height: 100%;"></div>
<div class="page-top-tip">
    <table>
        <tr>
            <td>
                <label>请输入地址：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="tipinput" size="45"/>
                <div id="test"></div>
                <div id="test1"></div>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
/***************************************
由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
***************************************/
    var geolocation, mapMarker,clickLng,clickLat;
    //加载地图，调用浏览器定位服务
    var map = new AMap.Map('aMapContainer', {
        resizeEnable: true,
        zoom:11
    });
    //显示比例尺
    var aMapScale = new AMap.Scale({
        visible: false
    });
    aMapScale.show();
    map.addControl(aMapScale);
    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    //解析定位结果
    function onComplete(data) {
        /* var str=['定位成功'];
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        if(data.accuracy){
             str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否')); */
        //document.getElementById('tip').innerHTML = str.join('<br>');
        
        clickLng = data.position.getLng();
        clickLat = data.position.getLat();
        addMapMarker(clickLng, clickLat);
    }
    //如果解析精确定位错误，则根据定位的城市名来定位
    function onError(data) {
        map.setCity(currentCityName);
    }
    
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    var clickEventListener = map.on('click', function(e) {
        //document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        clickLng = e.lnglat.getLng();
        clickLat = e.lnglat.getLat();
        I('test').innerHTML = clickLng + ',' + clickLat;
        if (mapMarker != null) {
        	map.remove(mapMarker);//清除原来的标记
		}
        
        //给点击的地方添加标记
        addMapMarker(clickLng, clickLat);
        //给点标记添加移动结束时监听事件
        AMap.event.addListener(mapMarker, 'dragend', mapMarkerDrag);
        regeocoder();
    });
    
    //输入提示
    var autoOptions = {input: "tipinput"};
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({map: map});  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
        clickLng = e.poi.location.lng;
        clickLat = e.poi.location.lat;
    	I('test').innerHTML = clickLng + ',' + clickLat;
    	I('tipinput').value = e.poi.district + I('tipinput').value;
    	addMapMarker(clickLng, clickLat);
    	regeocoder();
    }
    //点标记添加移动结束时监听事件函数
    function mapMarkerDrag(e) {
    	clickLng = e.lnglat.lng;
        clickLat = e.lnglat.lat;
    	I('test').innerHTML = clickLng + ',' + clickLat;
	}
    //通过经纬度添加地图标记
	function addMapMarker(lng, lat) {
		mapMarker = new AMap.Marker({
       		map: map,
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
            draggable: true,  //是否可拖动
            position: [lng, lat]
    	});
	}
    
	function regeocoder() {//逆地理编码,经纬度转地址
		var lnglatXY = [clickLng, clickLat];
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        geocoder.getAddress(lnglatXY, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoderCallBack(result);
            }
        });
    }
	function geocoderCallBack(data) {
	    var address = data.regeocode.formattedAddress; //返回地址描述
	    I("test1").innerHTML = address;
	}
</script>
</body>
</html>